<template>
    <fieldset>
        <legend>主页</legend>
        <h1>主页</h1>
        <h2>vuex的state:{{ $store.state.name }}</h2>
        <h1>getters:{{ $store.getters.reverseMsg }}</h1>
        <fieldset>
            <legend>购物车</legend>
            <ul>
                <li v-for="item in $store.state.cart">{{ item.title }}</li>
            </ul>
            <button @click="FETCH_CART(77)">获取购物车数据</button>
        </fieldset>
    </fieldset>
</template>
<script>
import { mapActions } from "vuex"
export default {
    mounted() {
        //获取vuex store中的状态
        console.log(this.$store.state.name)

        //触发mutation 获取购物车数据

        // this.$store.commit('FETCH_CART')

        //触发action 需要使用dispatch方法
        // this.$store.dispatch('FETCH_CART',666)

    },
    //actions也是映射到methods中
    methods: {
        ...mapActions(['FETCH_CART'])
    }
}
</script>